<%@ page language="java" 
	contentType="text/html; 
	charset=UTF-8"
	pageEncoding="UTF-8"
	import="connectMysql.TestConnect"
	%>
<!DOCTYPE html>
<html>
<head>
	<style>
	.center {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 100vh;
			}
			.select-box-container {
		      display: none;
		      position: absolute;
		      top: calc(50% + 70px);
		      left: calc(50% -100px);
		      text-align: center;
		    }
		    .select-box {
		    	text-align: center;
			      width: 200px;
			      font-size: 10px;
				  padding: 10px;
				  border-radius: 5px;
		    }
	        .button {
	            margin-right: 10px;
	            margin-left: 10px;
	            height: 100px;
	            width: 200px;
	            font-size: 24px;
	            font-weight: bold;
	            border-radius: 10px;
	            background-color: #4CAF50; /* Green */
	            color: white;
	        }
	        input[type="text"], input[type="password"], select {
				display: block;
				width: 110%;
				padding: 10px;
				margin-bottom: 20px;
				border-radius: 5px;
				border: none;
				box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
			}
	        input[type="submit"],input[type="button"] {
				text-align: center;
				background-color: #4CAF50;
				color: #fff;
				padding: 10px 20px;
				border-radius: 5px;
				border: none;
				cursor: pointer;
			}
			input[type="submit"]:hover ,input[type="button"]:hover{
				background-color: #3e8e41;
			}
			.return_button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
	</style>
		<%
	    	String userid=request.getParameter("id");
			String[] lesson_name=connectMysql.TestConnect.get_all_lesson_name();
	    %>
</head>
<body>
	<div style="position:absolute; top:0; left:60;">
		<h1 id="user_id">工号:<%=userid %></h1>
	</div>
	
	<script >
	var list = [];
	  <% for (int i = 0; i < lesson_name.length; i++) { %>
	    list.push("<%= lesson_name[i] %>");
	  <% } %>
	</script>
	
	<div class="center">
	  <form action="class_init_check.jsp?id=<%=userid %>" method="post">
	    <label for="class-name">班级名称:</label><br>
	    <input type="text" id="class-name" name="class-name">
	    
	    <select id="dropdown" onchange="selectOption()">
	        <option value="">请选择</option>
	        <!-- 使用循环将数组list的选项添加到下拉列表中 -->
	        <script>
	            for (var i = 0; i < list.length; i++) {
	                document.write('<option value="' + list[i] + '">' + list[i] + '</option>');
	            }
	        </script>
	    </select>
	    
	    <button type="button" onclick="generateCode()">生成邀请码</button><br><br>
	    <label for="invite-code">邀请码:</label><br>
	    <input type="text" id="invite-code" name="invite-code" readonly>
	    <input type="submit" value="创建班级"/>
	  </form> 
	</div>
	<button class="return_button" onclick="back()">退出</button>
	<script>
	console.log(list);
	function back(){
		window.location="login.jsp";
	}
	function selectOption() {
	    var dropdown = document.getElementById("dropdown");
	    var input = document.getElementById("class-name");
	    var selectedOption = dropdown.value;
	    input.value = selectedOption;
	}
	function generateCode() {
	  var result           = '';
	  var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	  var charactersLength = characters.length;
	  for ( var i = 0; i < 10; i++ ) {
	     result += characters.charAt(Math.floor(Math.random() * charactersLength));
	  }
	  document.getElementById("invite-code").value = result;
	}
	</script>

</body>
</html>